<template>
  <div class="component-page">
    <OverviewComponent class="component-overview-item" v-for="(item, index) in components" :key="index"
      :title="item.name + item.description" @click="$router.push({ name: item.pathName })" />
  </div>
</template>
<script setup lang="ts">
import OverviewComponent from '@/components/OverviewComponent.vue'
import { ref } from 'vue'

const components = ref([
  {
    name: 'Button',
    description: '按钮',
    pathName: 'button',
    props: [
      {
        name: 'type',
        description: '按钮类型',
        type: 'String',
        default: 'default',
      },
    ],
  },
  {
    name: 'Input',
    description: '输入框',
    pathName: 'input',
    props: [
      {
        name: 'type',
        description: '输入框类型',
        type: 'String',
        default: 'text',
      },
    ],
  },
  {
    name: 'Container',
    description: '容器',
    pathName: 'container',
    props: [
      {
        name: 'direction',
        description: '布局方向',
        type: 'String',
        default: 'row',
      },
    ],
  },
  {
    name: 'Grid',
    description: '网格',
    pathName: 'grid',
    props: [
      {
        name: 'col',
        description: '网格列数',
        type: 'Number',
        default: '12',
      },
    ],
  },
  {
    name: 'Menu',
    description: '菜单',
    pathName: 'menu',
    props: [
      {
        name: 'mode',
        description: '菜单模式',
        type: 'String',
        default: 'vertical',
      },
    ],
  },
  {
    name: 'Skeleton',
    description: '骨架屏',
    pathName: 'skeleton',
    props: [
      {
        name: 'loading',
        description: '是否显示骨架屏',
        type: 'Boolean',
        default: 'false',
      },
    ],
  },
  {
    name: 'SplitPanel',
    description: '分割面板',
    pathName: 'split-panel',
    props: [
      {
        name: 'direction',
        description: '分割方向',
        type: 'String',
        default: 'horizontal',
      },
    ],
  },
  {
    name: 'Checkbox',
    description: '多选框',
    pathName: 'checkbox',
    props: [
      { name: 'value', description: '是否选中', type: 'Boolean', default: 'false' },
      { name: 'indeterminate', description: '是否为不确定状态', type: 'Boolean', default: 'false' },
      { name: 'disabled', description: '是否禁用', type: 'Boolean', default: 'false' },
    ],
  },
  {
    name: 'Radio',
    description: '单选框',
    pathName: 'radio',
    props: [
      { name: 'value', description: '是否选中', type: 'Boolean', default: 'false' },
      { name: 'disabled', description: '是否禁用', type: 'Boolean', default: 'false' },
    ],
  },
  {
    name: 'Modal',
    description: '对话框',
    pathName: 'modal',
    props: [
      { name: 'visible', description: '是否显示', type: 'Boolean', default: 'false' },
      { name: 'title', description: '标题', type: 'String', default: '' },
      { name: 'okText', description: '确定按钮文字', type: 'String', default: '确定' },
      { name: 'cancelText', description: '取消按钮文字', type: 'String', default: '取消' },
    ],
  },
  {
    name: 'Carousel',
    description: '轮播图',
    pathName: 'carousel',
    props: [
      { name: 'autoplay', description: '是否自动播放', type: 'Boolean', default: 'false' },
      { name: 'interval', description: '切换间隔时间', type: 'Number', default: '3000' },
    ],
  },

  {
    name: "ContexMenu",
    description: '右键菜单',
    pathName: 'context-menu',
    props: [
      { name: 'options', description: '菜单选项', type: 'Array', default: '[]' },
    ],
  },
  {
    name: 'Message',
    description: '全局提示',
    pathName: 'message',
    props: [
      { name: 'type', description: '提示类型', type: 'String', default: 'info' },
      { name: 'content', description: '提示内容', type: 'String', default: '' },
    ],
  },
  {
    name: "Rate",
    description: '评分',
    pathName: 'rate',
    props: [
      { name: 'value', description: '当前分值', type: 'Number', default: '0' },
      { name: 'count', description: '总分数', type: 'Number', default: '5' },
      { name: 'allowHalf', description: '是否允许半选', type: 'Boolean', default: 'false' },
      { name: 'disabled', description: '是否禁用', type: 'Boolean', default: 'false' },
    ],
  }, {
    name: "Switch",
    description: '开关',
    pathName: 'switch',
    props: [
      { name: 'value', description: '是否打开', type: 'Boolean', default: 'false' },
      { name: 'disabled', description: '是否禁用', type: 'Boolean', default: 'false' },
    ],
  }, {
    name: "Card",
    description: '卡片',
    pathName: 'card',
    props: [
      { name: 'title', description: '卡片标题', type: 'String', default: '' },
      { name: 'extra', description: '卡片右上角内容', type: 'String', default: '' },
      { name: 'bordered', description: '是否显示边框', type: 'Boolean', default: 'false' },
      { name: 'hoverable', description: '是否可悬停', type: 'Boolean', default: 'false' },
    ],
  }, {
    name: "Form",
    description: '表单',
    pathName: 'form',
    props: [
      { name: 'rules', description: '表单验证规则', type: 'Object', default: '{}' },
      { name: 'inline', description: '是否以行内形式展示', type: 'Boolean', default: 'false' },
      { name: 'labelWidth', description: '标签宽度', type: 'String', default: '100px' },
      { name: 'labelPosition', description: '标签位置', type: 'String', default: 'right' },
    ],
  }, {
    name: 'Tooltip',
    description: '提示框',
    pathName: 'tooltip',
    props: [
      { name: 'content', description: '提示内容', type: 'String', default: '' },
      { name: 'position', description: '提示框位置', type: 'String', default: 'top' },
    ],
  },
  {
    name: "Typography",
    description: '排版',
    pathName: 'typography',
    props: [
      { name: 'type', description: '排版类型', type: 'String', default: 'text' },
      { name: 'weight', description: '字重', type: 'String', default: 'normal' },
      { name: 'color', description: '字体颜色', type: 'String', default: '' },
      { name: 'align', description: '对齐方式', type: 'String', default: 'left' },
      { name: 'lineHeight', description: '行高', type: 'String', default: '1.5' },
      { name: 'fontSize', description: '字体大小', type: 'String', default: '14px' },
      { name: 'fontFamily', description: '字体', type: 'String', default: '' },
    ],
  }, {
    name: "Statistic",
    description: '统计数值',
    pathName: 'statistic',
    props: [
      { name: 'value', description: '数值', type: 'Number', default: '0' },
      { name: 'precision', description: '精度', type: 'Number', default: '0' },
      { name: 'prefix', description: '前缀', type: 'String', default: '' },
      { name: 'suffix', description: '后缀', type: 'String', default: '' },
      { name: 'decimalSeparator', description: '小数点', type: 'String', default: '.' },
      { name: 'groupSeparator', description: '千分位分隔符', type: 'String', default: ',' },
    ],
  }
])
</script>
<style scoped>
.component-page {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 20px;
  grid-template-rows: auto;
}

.component-overview-item {
  height: 300px;
  margin: 50px;
}
</style>
